---
title: ContextMenu
description: A Jetpack Compose ContextMenu component for displaying context menus.
sourceCodeUrl: 'https://github.com/expo/expo/tree/main/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['android']
---

import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ContentSpotlight } from '~/ui/components/ContentSpotlight';
import { Tabs, Tab } from '~/ui/components/Tabs';

> **Note:** Also known as **DropdownMenu**.

A context menu component that displays a menu when triggered, commonly used for actions and options.

## Installation

<APIInstallSection />

## Usage

<Tabs>
  <Tab label="Preview">
    <ContentSpotlight
      alt="ContextMenu component on Android."
      src="/static/images/expo-ui/contextMenu/android.png"
      className="max-w-[380px]"
    />
  </Tab>
  <Tab label="Code">
    ```tsx
    import { ContextMenu } from '@expo/ui/jetpack-compose';

    <ContextMenu style={{ width: 150, height: 50 }}>
      <ContextMenu.Items>
        <Button
          elementColors={{ containerColor: '#0000ff', contentColor: '#00ff00' }}
          onPress={() => console.log('Pressed1')}>
          Hello
        </Button>
        <Button
          variant="bordered"
          color="#ff0000"
          onPress={() => console.log('Pressed2')}>
          Love it
        </Button>
        <Picker
          label="Doggos"
          options={['very', 'veery', 'veeery', 'much']}
          variant="menu"
          selectedIndex={selectedIndex}
          onOptionSelected={({ nativeEvent: { index } }) => setSelectedIndex(index)}
        />
      </ContextMenu.Items>
      <ContextMenu.Trigger>
        <Button variant="bordered" style={{ width: 150, height: 50 }}>
          Show Menu
        </Button>
      </ContextMenu.Trigger>
    </ContextMenu>
    ```

  </Tab>
</Tabs>

> See [official Jetpack Compose documentation](https://developer.android.com/develop/ui/compose/components/menu) for more information.

## API

<APISection packageName="expo-ui/jetpack-compose/contextmenu" apiName="ContextMenu" />
